<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :cell-class-name="orderId"
  >
    <el-table-column fixed prop="orderId" label="单据编号" width="150">
      <template slot-scope="scope">
        <PurchaseOrderView :data="scope.row"/>
      </template>
    </el-table-column>
    <el-table-column prop="createDate" label="单据日期" width="120">
    </el-table-column>
    <el-table-column prop="supplier" label="供应商" width="120">
    </el-table-column>
    <el-table-column prop="department" label="业务部门" width="120">
    </el-table-column>
    <el-table-column prop="staff" label="业务员" width="100"> </el-table-column>
    <el-table-column prop="statusName" label="订单状态" width="120">
    </el-table-column>
    <el-table-column prop="count" label="数量" width="120"> </el-table-column>
    <el-table-column prop="money" label="金额" width="120"> </el-table-column>
    <el-table-column prop="approver" label="审批人" width="120">
    </el-table-column>
    <el-table-column prop="approveDate" label="审批时间" width="120">
    </el-table-column>
    <el-table-column prop="approverResult" label="审批结果" width="120">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handleClick(scope.row)"
          >编辑</el-button
        >
        <el-dropdown>
          <span class="el-dropdown-link">
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>审核通过</el-dropdown-item>
            <el-dropdown-item>驳回</el-dropdown-item>
            <el-dropdown-item>打印</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import PurchaseOrderDetailTable from "./PurchaseOrderDetailTable.vue";
import PurchaseOrderView from "./PurchaseOrderView.vue";

export default {
  name: "PurchaseOrderTable",
  components: { PurchaseOrderView,PurchaseOrderDetailTable },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    orderId(row) {
      // console.log("orderId row", row);
      // var that = this;
      if (row.columnIndex == 0) {
        return "orderId";
      }
    },
    handleClose(done) {
      done()
    },
  },

  data() {
    return {
      tableData: [
        {
          orderId: "CGDD-1",
          createDate: "2024-10-14",
          supplier: "供应商测试1",
          department: "采购部",
          staff: "张三",
          money: 1000000000,
          status: 0,
          statusName: "待审核",
          count: 100000000,
          applyDate: "2024-10-14",
          approver: "张三的领导",
          approveDate: "2024-10-15",
          approverResult: 0,
        },
      ],
      dialogVisible: false,
    };
  },
};
</script>

<style>
.orderId {
  color: #0090ff !important;
  cursor: pointer;
}

.el-dropdown-link {
  margin-left: 5px;
  font-size: 12px;
  color: #0090ff !important;
  cursor: pointer;
}
</style>